<template>
  <div class="order">
    <div class="charge-box">
      <div class="box-top">
        <div class="charge-name">张三充电站</div>
        <div class="price">1.6币/度</div>
      </div>
      <p class="address">
        <van-icon name="location-o" /> 
        <span>北京市昌平区南口镇</span>
      </p>
    </div>
    <div class="time-box">
      <img src="@/assets/img/charge.jpg" alt="">
      <p class="time-text">充电时长</p>
      <p class="time">{{ obj.chargeTime }}</p>
    </div>
    <div class="order-info">
      <div class="item">
        <div class="item-left">预约订单编号：</div>
        <div class="item-right">{{ obj.order_No }}</div>
      </div>
      <div class="item">
        <div class="item-left">充电订单编号：</div>
        <div class="item-right">{{ obj.order_No }}</div>
      </div>
      <div class="item">
        <div class="item-left">延长预约订单编号：</div>
        <div class="item-right">{{ obj.order_No }}</div>
      </div>

      <div class="item">
        <div class="item-left">下单时间：</div>
        <div class="item-right">{{ obj.date }}</div>
      </div>
      <div class="item">
        <div class="item-left">预约等待时间：</div>
        <div class="item-right">{{ obj.date }}</div>
      </div>
      <div class="item">
        <div class="item-left">预约时间：</div>
        <div class="item-right">{{ obj.date }}</div>
      </div>
      <div class="item">
        <div class="item-left">开始时间</div>
        <div class="item-right">{{ obj.date }}</div>
      </div>
      <div class="item">
        <div class="item-left">使用电额</div>
        <div class="item-right">10度</div>
      </div>
      <div class="item">
        <div class="item-left">订单金额</div>
        <div class="item-right">0.12币</div>
      </div>
      <div class="item">
        <div class="item-left">获得积分</div>
        <div class="item-right">1</div>
      </div>
      <div class="item">
        <div class="item-left">充电桩编号：</div>
        <div class="item-right">{{ obj.chargePile }}</div>
      </div>
      <div class="item">
        <div class="item-left">充电桩类型：</div>
        <div class="item-right">90KWH</div>
      </div>
      <div class="item">
        <div class="item-left">当前电量</div>
        <div class="item-right">0Kwh</div>
      </div>
      <div class="item">
        <div class="item-left">当前充电币</div>
        <div class="item-right">0充电币</div>
      </div>
    </div>
    <div class="btn">结束充电</div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        obj: ""
      }
    },
    methods: {
    },
    created() {
      this.obj = this.$route.query.obj
      console.log(this.$route.query.obj)
    }
}
</script>

<style lang='sass' scoped>
.order
  width: 100%
  height: calc(100vh - 96px)
  background: #ccc
  overflow: auto
  .charge-box
    width: 100%
    padding: .2rem
    margin-top: .1rem
    background: #fff
    .box-top
      display: flex
      justify-content: space-between
      font-size: .28rem
      line-height: .4rem
      .charge-name
        font-size: .32rem
        font-weight: bold
      .price
        color: orange
    .address
      margin-top: .1rem
      font-size: .28rem
      line-height: .4rem
      display: flex
      align-items: center
      i
        font-size: .38rem
        margin-right: .1rem
  .time-box
    width: 100%
    padding: .3rem .2rem
    margin-top: .1rem
    background: #fff
    display: flex
    justify-content: space-between
    color: #59c883
    .time-text
      width: 1rem
    .time
      font-size: .48rem
      line-height: .84rem
  .order-info
    width: 100%
    padding: .2rem
    margin-top: .1rem
    background: #fff
    .item
      display: flex
      justify-content: space-between
      line-height: .8rem
      font-size: .28rem
  .btn
    width: 6rem
    height: .8rem
    margin: .5rem auto
    text-align: center
    line-height: .8rem
    background: #666
    color: #fff
</style>